<template>
    <section>
        <p style="text-align: center;margin-top: 50px;font-size: 20px">話し手の研究３</p>

        <div v-if="userType == 0"
             style="width: 700px;height: 600px;margin-left: calc((100% - 700px)/2);border:1px solid #000;">

            <div style="display: flex;justify-content: center">
                <div @click="showSpeaker" style="display: flex;margin-top: 50px;line-height: 50px;">
                    <div style="width: 50px;height: 50px;background-color: blue;border-radius:50px;cursor: pointer"></div>
                    <span style="margin-left: 20px;font-size: 20px;">話し手</span>
                </div>

                <div @click="showListener" style="display: flex;margin-top: 50px;line-height: 50px;">
                    <div style="width: 50px;height: 50px;background-color: white;border:1px solid blue; border-radius:50px;margin-left: 100px;cursor: pointer"></div>
                    <span style="margin-left: 20px;font-size: 20px;">聞き手</span>
                </div>
            </div>

            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">実験番号:</span>
                    <input style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">研究番号:</span>
                    <input disabled="disabled" style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">年龄&emsp;&emsp;:</span>
                    <input style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">性别&emsp;&emsp;:</span>
                    <select style="margin-left: 20px;font-size: 20px;width: 200px;text-align: center">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>

                </div>
            </div>

            <p style="float: left;margin-top: 30px;margin-left: 50px;line-height: 50px;">実験番号、実験キャラと研究タイプを選択してください。</p>
            <div @click="gotoNext"
                 style="cursor: pointer;float: right;margin-right: 20px;margin-top: 30px; width:120px; height: 50px;background-color: blue;color: white;font-weight: bold;line-height: 50px;font-size: 20px;text-align: center">
                NEXT
            </div>

        </div>
        <div v-else style="width: 700px;height: 600px;margin-left: calc((100% - 700px)/2);border:1px solid #000;">

            <div style="display: flex;justify-content: center">
                <div @click="showSpeaker" style="display: flex;margin-top: 50px;line-height: 50px;">
                    <div style="width: 50px;height: 50px;background-color: white;border:1px solid blue; border-radius:50px;cursor: pointer"></div>
                    <span style="margin-left: 20px;font-size: 20px;">話し手</span>
                </div>

                <div @click="showListener" style="display: flex;margin-top: 50px;line-height: 50px;">
                    <div style="margin-left: 100px;width: 50px;height: 50px;background-color: blue;border-radius:50px;cursor: pointer"></div>
                    <span style="margin-left: 20px;font-size: 20px;">聞き手</span>
                </div>
            </div>

            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">実験番号:</span>
                    <input disabled="disabled" style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">研究番号:</span>
                    <input style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">年龄&emsp;&emsp;:</span>
                    <input disabled="disabled" style="margin-left: 20px;font-size: 20px;width: 200px;">
                </div>
            </div>
            <div style="display: flex;justify-content: center">
                <div style="display: flex;margin-top: 50px;line-height: 50px;">
                    <span style="font-size: 20px;width:100px;text-align:right ">性别&emsp;&emsp;:</span>
                    <select disabled="disabled"
                            style="margin-left: 20px;font-size: 20px;width: 200px;text-align: center">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>

                </div>
            </div>

            <p style="float: left;margin-top: 30px;margin-left: 50px;line-height: 50px;">研究番号を選択してください。</p>

            <div @click="gotoNext"
                 style="cursor: pointer;float: right;margin-right: 20px;margin-top: 30px; width:120px; height: 50px;background-color: blue;color: white;font-weight: bold;line-height: 50px;font-size: 20px;text-align: center">
                NEXT
            </div>

        </div>


    </section>
</template>

<script>
    import {getRequest, postRequest} from '../service/request'

    export default {
        name: "homePage",
        components: {},
        data: function () {
            return {
                userType: 0,
            }
        },
        methods: {
            showSpeaker() {
                this.userType = 0
            },
            showListener() {
                this.userType = 1
            },
            gotoNext() {
                if (this.userType == 0) {
                    this.$router.push({
                        path: '/speaker'
                    });
                } else {
                    this.$router.push({
                        path: '/listener'
                    });
                }

            }
        },
        mounted: function () {
            getRequest('/evaluation/appApi/research/setting/round/query/03').then(respond => {
                    console.log(respond)
                }
            )
        }
    };
</script>
